<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字发光字体</title>
    <style>
        body {
            background-color: #666;
            text-align: center;
            font: 55px bold;
        }

        .font1 {
            color: #fff;
            /* 正常阴影效果 */
            /* text-shadow: 2px 2px 3px #000; */
            text-shadow: 0 0 20px #f00;
        }

        .font2 {
            color: #000;
            text-shadow: 0 1px 1px #fff;
        }

        .font3 {
            color: #fff;
            text-shadow: 1px 1px rgba(197, 233, 248, 0.8),
                         2px 2px rgba(197, 233, 248, 0.8),
                         3px 3px rgba(197, 233, 248, 0.8),
                         4px 4px rgba(197, 233, 248, 0.8),
                         5px 5px rgba(197, 233, 248, 0.8);
        }
    </style>
</head>
<body>
    <div class="font1">Panda</div>
    <div class="font2">APPLE STYLE</div>
    <div class="font3">3D TEXT EFFECT</div>
</body>
</html>